<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					title="门店报表"
					sub-title="以门店为单位进行汇总（当前登陆账号所管理的门店）"
					:columns="initColumns"
					:print="printParams"
					v-model="tableData.columns"
					@export-file="exportExcel"
				/>
				<el-row type="flex">
					<cl-filter-group v-model="search">
					
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>

						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								filterable
								clearable
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
							/>
						</cl-filter>
						<cl-filter label="城市">
							<cl-select
								v-model="search.city_id"
								placeholder="请选择"
								filterable
								clearable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.city"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="tableData" id="storeReport">
				<cl-empty slot="empty" />
			</cl-table>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
import dayjs from "dayjs";
import { cloneDeep } from "cl-admin/utils";
import { exportExcel } from "@/utils/excel";
export default {
	data() {
		return {
			printParams: {
				id: "storeReport",
				popTitle: "门店报表"
			},
			// 表格配置
			tableData: {
				"context-menu": ["refresh"],
				sortRefresh: false,
				columns: [],
				props: {
					showSummary: true,
					summaryMethod: this.getSummaries,
					maxHeight: 500
				}
			},
			summary: {},
			initColumns: [],
			search: {
				date: [
					dayjs()
						.startOf("day")
						.format("YYYY-MM-DD"),
					dayjs()
						.endOf("day")
						.format("YYYY-MM-DD")
				],
				biz_id: "",
				company_id: "",
				bra_id: [],
				city_id: ""
			}
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
		this.tableData.columns = cloneDeep(this.initColumns);
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.onsale)
				.set("dict", {
					api: {
						page: "onsalestorerep"
					}
				})
				.done();
			app.refresh(this.search);
		},
		async onRefresh(params, { next, done, render }) {
			let res = await next(params);
			this.summary = res.total || {};
			let columns = (res?.title ?? []).map((v, i) => {
				return {
					disable: i == 0,
					fixed: i == 0,
					prop: v.key,
					label: v.name,
					minWidth: 170,
					sortable: true
				};
			});
			this.tableData.columns = [...columns];
			this.initColumns = [...columns];
			render(res.data);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		onResize(h) {
			this.tableData.props.maxHeight = h;
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getBizRefCompany(biz_id);
			this.getBizRefCity(biz_id);
		},
		//切换事业部
		changeBiz() {
			this.search.bra_id = [];
			this.search.company_id = "";
			this.search.city_id = "";
			this.init();
			// this.refresh();
		},
		// 表格合计
		getSummaries({ columns }) {
			return columns.map(col => {
				let prop = col.property;
				let sum = this.summary[prop];
				return sum != undefined ? sum : "";
			});
		},
		// 导出EXCEl
		exportExcel() {
			exportExcel("#storeReport");
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-table--scrollable-x {
		.el-table__body-wrapper {
			z-index: 2;
		}
	}
}
</style>
